<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
    @@include('./include/header.html')
    <link rel="stylesheet" href="../assets/js/Swiper-4.0.7/swiper.min.css"/>
    <title>商品详情</title>
    <style>
        .swiper-pagination-bullet{
            background-color: #fff;
            opacity: 1;
        }
        .swiper-pagination-bullet-active{
            opacity: 0.5;
            width: 16px;
            border-radius: 10px;
        }
        /* 2018/04/10 */
        .cat_icon{
            position:fixed;
            left:15px;
            bottom:80px;
            z-index: 111;
        }
        .cat_icon img{width:40px;height:40px;display:block;}
        /* 2018/04/10 */
    </style>
</head>
<body class="dtbody">
<div class="page">
    <div class="page-hd">
        @@include('./include/page-hd.html', {
        "title": "商品详情",
        "menu": ""
        })
    </div>
    <div class="page-bd">
        <!-- 2018/04/10 -->
        <div class="cat_icon">
            <img src="../assets/images/cat_icon.png" alt="" />
            <span class="weui-badge" style="position: absolute;top: 0;right: -6px;">888</span>
        </div>
        <!-- 2018/04/10 --> 
        <!-- 页面内容-->
        <div class="swiper-container" id="banner">
            <div class="swiper-wrapper">
                <div class="swiper-slide">
                    <div class="dtimg_box" style="background-image: url('../assets/images/banner.jpg')"></div>
                </div>
                <div class="swiper-slide">
                    <div class="dtimg_box" style="background-image: url('../assets/images/banner.jpg')"></div>
                </div>
                <div class="swiper-slide">
                    <div class="dtimg_box" style="background-image: url('../assets/images/banner.jpg')"></div>
                </div>
            </div>
            <div class="swiper-pagination"></div>
        </div>
        <div class="weui-cells buy-cells">
            <div class="weui-cell">
                <div class="weui-cell__bd">
                    <div class="pro_title">
                        阿迪达斯男女 跑步鞋透气减震跑步鞋2018潮人必备新品跑步鞋透气减震跑步鞋2018潮人必备新品
                    </div>
                    <div class="weui-flex flex-center mt20">
                        <div class="weui-flex__item">
                            <span class="price">  会员价：<span class="text-red">￥</span><b>639.00</b>元</span>
                            <span class="fs20 text-muted">市场价：899.00</span>
                        </div>
                        <div class="text-muted fs20">库存：487652</div>
                    </div>
                    <div class="bor-1px-t mt20"></div>
                </div>
            </div>
            <div class="max-height">
                <div class="weui-cell ptb0">
                    <div class="weui-cell__bd">
                        <div class="label_group">
                            <h3 class="label_tit">请选择颜色：</h3>
                            <div class="labels">
                                <label>
                                    <input name="color" checked type="radio">
                                    <span>粉紫</span>
                                </label>
                                <label>
                                    <input name="color" type="radio">
                                    <span>深蓝</span>
                                </label>
                                <label>
                                    <input name="color" type="radio">
                                    <span>靛蓝</span>
                                </label>
                            </div>
                        </div>
                        <div class="label_group">
                            <h3 class="label_tit">请选择尺码：</h3>
                            <div class="labels">
                                <label>
                                    <input name="size" checked type="radio">
                                    <span>36</span>
                                </label>
                                <label>
                                    <input name="size" type="radio">
                                    <span>37</span>
                                </label>
                                <label>
                                    <input name="size" type="radio">
                                    <span>37</span>
                                </label>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="weui-cell">
                    <div class="weui-cell__bd">
                        购买数量：
                    </div>
                    <div class="weui-cell__ft">
                        <div class="count small_count">
                            <a class="count_btn count_minus"></a>
                            <input class="count_number" type="number" value="1">
                            <a class="count_btn count_plus"></a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="weui-panel" style="background-color: #fff">
            <div class="weui-panel__hd" style="padding-top: 10px; padding-bottom: 8px">
                <span class="fs28" style="color: #333;">商品详情</span>
                <span>
                    <img class="icon_pic" src="../assets/images/icon_pic.png" alt="">
                </span>
            </div>
            <div class="weui-panel__bd">
                <div class="dtcon_box">
                    <img src="../assets/images/banner.jpg" alt="">
                    <img src="../assets/images/banner.jpg" alt="">
                    <img src="../assets/images/banner.jpg" alt="">
                    <img src="../assets/images/banner.jpg" alt="">
                    <img src="../assets/images/banner.jpg" alt="">
                    <img src="../assets/images/banner.jpg" alt="">
                    <img src="../assets/images/banner.jpg" alt="">
                </div>
            </div>
        </div>
    </div>
    @@include('./include/bottom-bar.html',{
    "item1": "active",
    "item2": "",
    "item3": "",
    "item4": ""
    })
</div>

@@include('./include/footer.html')
<script src="../assets/js/Swiper-4.0.7/swiper.min.js"></script>
<script>
    var banner = new Swiper('#banner', {
        loop: true,
        pagination: {
            el: '.swiper-pagination'
        }
    });
</script>
</body>
</html>